<div class="dataTable  equipment-alarm-history">
    <div class="table-buttons">
      <div class="table-buttons-left">
        <!-- <div class="operate" (click)="refresh()"><i class="iconfont icon-refresh1"></i> {{ 'TrafficManagement.TrafficAlert.Refresh' | translate }}</div> -->
        <button nz-button nzType="primary" (click)="refresh()"><i nz-icon nzType="reload" nzTheme="outline"></i>{{'TrafficManagement.TrafficAlert.Refresh' | translate}}</button>
        <!-- <div class="alarmHisPeriod">
          <span>Period:</span>
          <nz-range-picker
            [(ngModel)]="period"
            [nzShowTime]="{ nzFormat: 'HH:mm' }"
            nzFormat="yyyy-MM-dd HH:mm"
            [nzPlaceHolder]="['Start Time', 'End Time']"
            (ngModelChange)="onDateOk($event)"
          ></nz-range-picker>
        </div> -->
      </div>
      <div class="table-buttons-right">
        <!-- <div class="equipmet_toolbar"> -->
          <itmp-toolbar exportName="equipmentAlarmHistory" [toolbarList]="toolbarList" [eventType]="'alarm-position'" [selectData]="selectAlarm" [searchData]="searchData" [accessButton]='accessButton'></itmp-toolbar>
        <!-- </div> -->
      </div>
    </div>
    <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzPageSize]="pagination.pageSize" [nzData]="listOfData" style="padding:0.1rem">
      <thead>
        <tr class="dataTitle">
          <th *ngFor="let item of renderHeader" class="listTitle">
            <div>{{"EquipmentManagement.equipmentAlarm." + item.name | translate}}</div>
            <!-- 选择框 -->
            <div class="switch" *ngIf="item.name==='Alarm_Source'" style="min-width: 1.3rem">
              <nz-select style="width: 100%;"
               [(ngModel)]="searchData[item.value]" 
               [nzPlaceHolder]="'Share.All' | translate"
               nzShowSearch
               nzAllowClear
               (ngModelChange)="onSearch(item.value)">
                <nz-option *ngFor="let one of selectionList[item.name]" [nzLabel]="'EquipmentManagement.equipmentAlarm.'+one|translate" [nzValue]="one"></nz-option>
              </nz-select>
            </div>
            <!-- 输入框 -->
            <div class="switch" *ngIf="item.name==='Alarm_ID' || item.name==='Equipment_ID' || item.name==='Description' || item.name==='Zone_ID' || item.name==='Alarm_Code'">
              <input nz-input [placeholder]="'' | translate" 
              style="width:100%" 
              [(ngModel)]="searchData[item.value]"
              (keyup)="onSearch(item.value)"
              #searchInput/>
            </div>
            <!-- 日期选择 -->
            <div class="switch" *ngIf="item.name==='Detection_Date' || item.name==='Ack_Date'">
                <!-- <nz-date-picker [(ngModel)]="searchData[item.value]" (ngModelChange)="onSearch(item.value)"></nz-date-picker> -->
                <nz-range-picker nzFormat="yyyy-MM-dd" [nzPlaceHolder]="['EquipmentManagement.EquipmentManagement.Start Time'|translate, 'EquipmentManagement.EquipmentManagement.End Time'|translate]"
                [(ngModel)]="dateArr[item.value]" [nzDisabledDate]="disabledDate" (ngModelChange)="onDateOk($event, item.value)"></nz-range-picker>
            </div>
            <!-- 占用位置 -->
            <div class="switch" *ngIf="item.name==='Photograph'">
              <input nz-input style="opacity: 0" />
            </div>
          </th>
        </tr>
      </thead>
      <tbody class="dataList">
        <tr *ngFor="let data of basicTable.data;index as i" (click)="clickTR(i)" [class.active]="data.active">
          <td>{{data.histAlarmId}}</td>
          <td>{{data.deviceID}}</td>
          <td>{{'EquipmentManagement.equipmentAlarm.'+data.alarmSource|translate}}</td>
          <td>{{data.detectionTime}}</td>
          <td>{{data.ackTime}}</td>
          <td>{{data.alarmCode}}</td>
          <td>{{data.description}}</td>
          <td>{{data.zoneID}}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <!-- <td>Showing 1 to 10 of 1083 entries</td> -->
          <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;" *ngIf="listOfData.length!==0">
            <itmp-pagination [totalEle]="pagination.totalEle"
              [pageSize]="pagination.pageSize"
              [pageNum]="pagination.currentPage"
              showCountInfo = true
              [count] = "pagination.currentSize"
              (pageNumChange)="onPageChange($event)"
              (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
          </td>
        </tr>
      </tfoot>
    </nz-table>
  </div>
